<template>
	<view class="home clearfix">
		<cu-custom bgColor="bg-transparent justify-end" isBack>
			<block slot="content"></block>
			<block slot="right">
				<view class="wp100 px15 flex align-center justify-between">
					<view class="flex align-center search-box px15" ><image src="/static/home/seo.png" class="block15"></image><text class="f12 text-info ml10">鎼滅储鍟嗗搧</text></view>
				</view>
			</block>
		</cu-custom>
		<view class="flex al-strar justify-between">
			<scroll-view class="scroll-view rtfenlei leftwidth" scroll-y >
				<view class="flex align-center nochoice-box" @click="xuanze(item,index)" :class="{'choice-box':typeindex==index}" v-for="(item,index) in typename" :key="index">
					<image src="/static/class/tuijian.png" class="tuijian-pic" v-if="typeindex==index" mode=""></image>
					<view class="tuijian-pic" v-else></view>
					<view class="ml10">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="flex flex-direction rightwidth">
				<view class="discenter wp100 mt20">
					<view class="bs"></view>
					<view class="mx5">{{names}}</view>
					<view class="bs"></view>
				</view>
				<view class="flex align-center flex-wrap ">
					<view @click="pushPage('/pages/class/fenleilist?name='+item.name+'&id='+item.id)" v-for="(item,index) in fenleidata" class="wp33 mt25 flex flex-direction align-center" :key="index">
						<image :src="item.img" class="fenleipic" mode=""></image>
						<text class="mt15">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			typeindex:0,
			typeid:'',
			names:'',
			fenleidata:[],
			typename: [],
		};
	},
	onLoad() {
		this.getData()
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapActions(['setStoretype', 'getUser']),
		OnReachBottom(){
			
		},
		xuanze(item,index){
			this.typeid=item.id
			this.names=item.name;
			this.getDatas()
			this.typeindex=index;
		},
		async getData() {
			let {
				data
			} = await this.$http.post('home.fenlei', {}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.typename=data
			this.names=this.typename[0].name
			this.typeid=this.typename[0].id
			this.getDatas()
		},
		async getDatas() {
			let {
				data
			} = await this.$http.post('home.fenleilist', {typeId:this.typeid}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.fenleidata=data
		},
	}
};
</script>

<style lang="less">
page{
	background-color: #FFFFFF;
}
.search-box {
	width: 630rpx;
	height: 66rpx;
	border-radius: 30rpx;
	background-color: #F7F7F7;
}
.nochoice-box{
	width: 200rpx;
	height: 110rpx;
	background-color: #F7F7F7;
}
.choice-box{
	width: 200rpx;
	height: 110rpx;
	background-color: #FFFFFF;
}
.tuijian-pic{
	width: 13rpx;
	height: 41rpx;
	margin-left: 14rpx;
}
.bs{
	width: 55rpx;
	height: 1rpx;
	background-color: #dfdfdf;
}
.leftwidth{
	width: 200rpx;
}
.rightwidth{
	width: calc(100% - 200rpx);
}
.fenleipic{
	width: 90rpx;
	height:90rpx;
}
</style>
